<template>
  <div class="addPaper">
    <el-form ref="addPaperRef" :model="paperInfo" label-width="80px">
      <el-form-item label="题库名字"
                    label-width="100px"
                    prop="paperName"
                    :rules="[{required: true, message: '题库名字不能为空', trigger: 'change'}]">
        <el-input v-model="paperInfo.paperName"></el-input>
      </el-form-item>
      <el-space fill>
        <el-alert type="info" show-icon :closable="false">
          <p>创建日期自动生成</p>
        </el-alert>
        <el-form-item label="创建日期" label-width="100px">
          <el-col :span="11">
            <el-date-picker placeholder="选择日期" v-model="paperInfo.paperDate" style="width: 100%;" disabled></el-date-picker>
          </el-col>
        </el-form-item>
      </el-space>
      <el-space fill>
        <el-alert type="info" show-icon :closable="false">
          <p>创建者默认为自己</p>
        </el-alert>
        <el-form-item label="创建者" label-width="100px">
          <el-input v-model="paperInfo.paperCreator" disabled></el-input>
        </el-form-item>
      </el-space>
      <el-form-item>
        <el-button type="primary" @click="addSubmit()">创建</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import AES from "@/utils/AESUtil";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router/dist/vue-router";

export default {
  name: "addPaper",
  setup(){
    const {proxy} = getCurrentInstance()
    const router = useRouter()
    let addPaperRef = ref(null)
    // eslint-disable-next-line no-undef
    let role = ref(AES.Decrypt($cookies.get("role")))
    let paperInfo = reactive({
      paperName: null,
      paperDate: new Date(),
      paperCreatorId: null,
      paperCreator: null
    })
    onMounted(()=>{
      // eslint-disable-next-line no-undef
      paperInfo.paperCreatorId = $cookies.get("id")
      // eslint-disable-next-line no-undef
      paperInfo.paperCreator = $cookies.get("name")
    })
    function addSubmit(){
      proxy.$refs.addPaperRef.validate((valid) => {
        if (valid) {
          proxy.$axios.post(
              `/manage/paper/add`,
              {...paperInfo}
          ).then(
              response => {
                if (response.data){
                  ElMessage({
                    type: 'success',
                    message: '添加成功',
                  })
                  router.push({path: '/manage'})
                }
              },
              error => {
                console.log('请求失败', error.message)
              }
          )
        }else {
          return false
        }
      })
    }
    return{
      role,
      paperInfo,
      addPaperRef,
      addSubmit
    }
  }
}
</script>

<style scoped>
.addPaper {
  padding: 0px 40px;
  width: 400px;
  margin-left: 350px;
  margin-top: 100px;
}
</style>